<template>
  <div class="scrollList">
    <swiper
      id="swiperBox"
      :options="swiperOption"
      ref="scrollSwiper"
    >
      <swiper-slide class="swiper-slide">
        <slot name="listInner"></slot>
      </swiper-slide>
      <div
        class="swiper-scrollbar"
        slot="scrollbar"
      ></div>
    </swiper>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'scroll',
  props: {
    list: Array,
    default: []
  },
  data () {
    return {
      swiperOption: {
        notNextTick: true,//notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        scrollbar: '.swiper-scrollbar',
        direction: 'vertical',
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  created () {
    setTimeout(() => {
      this.swiper.update();
    }, 20);
  },
  computed: {
    swiper () {
      return this.$refs.scrollSwiper.swiper;
    }
  },
  mounted () {
    this.swiper.slideTo(0, 0, false);
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.scrollList {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 255, 0.3);
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  padding: 0.1rem 0;
  font-size: 0.36rem;
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>